<template>
	<div class="clueSearchContainer">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>单线索查询搜索</span>
			</div>
			<div class="forms">
				<el-form ref="formall" :inline="true" :rules="rules" :model="formInline" label-suffix=":"
					class="demo-form-inline">
					<el-form-item label="数据类型" prop="type">
						<el-select v-model="formInline.type" placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="分析目标" prop="value">
						<el-input v-model="formInline.value" @input="inputValue" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" :loading="onceLoading" @click="goSearch">{{ text }}</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>复合线索查询搜索</span>
			</div>
			<el-form ref="form" :inline="true" :model="form" label-width="80px">
				<el-form-item label="导入文件">
					<div class="dialog-footer">
						<el-input v-model="fileName" placeholder="" size="normal" disabled></el-input>
					</div>
					<span style="color: red">{{ error }}</span>
					<input type="file" id="files" @change="changeFile" />
				</el-form-item>
				<el-button type="primary" @click="uploadFile">选择文件</el-button>
				<el-button type="primary" :loading="loading" @click="submitUpload">开始分析</el-button>
				</el-row>
			</el-form>
		</el-card>
		<el-card shadow="always" class="box-card " :body-style="{ padding: '20px' }">
			<div slot="header">
				<span>历史线索查询搜索项</span>
			</div>
			<div class="tables">
				<el-table :data="tableData" style="width: 96%">
					<el-table-column prop="id" label="项目编号"></el-table-column>
					<el-table-column prop="type" label="数据类型"></el-table-column>
					<el-table-column prop="target" label="分析目标"></el-table-column>
					<el-table-column prop="date" label="分析时间" width="180"></el-table-column>
					<el-table-column prop="status" label="分析状态" width="180"></el-table-column>
					<el-table-column prop="result" label="分析结果" width="180"></el-table-column>
					<el-table-column fixed="right" label="操作" width="180">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="details(scope.$index, scope.row)">查看详情
							</el-button>
							<!-- <el-button type="text" size="small">删除</el-button> -->
						</template>
					</el-table-column>
				</el-table>
				<div class="div_pagination">
					<el-pagination layout="total, prev, pager, next" :total="total" :current-page.sync="formlist.index"
						:page-size.sync="formlist.height" @current-change="history" />
				</div>
				<!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> -->
			</div>
		</el-card>
	</div>
</template>

<script>
	import qs from 'qs'
	export default {
		data() {
			return {
				onceLoading: false,
				loading: false,
				options: [{
						value: 'domain',
						label: '域名',
					},
					{
						value: 'ip',
						label: 'IP',
					},
					{
						value: 'hash',
						label: 'Hash',
					},
				],
				resultList: [{
						value: 'malicious',
						label: '恶意的',
					},
					{
						value: 'normal',
						label: '正常的',
					},
					{
						value: 'suspicious',
						label: '可疑的',
					},
				],
				fileList: [],
				value: 'spasibosberbank.ru',
				formInline: {
					type: '',
					value: '',
				},
				rules: {
					type: [{
						required: true,
						message: '请选择数据类型',
						trigger: 'blur'
					}],
					value: [{
						required: true,
						message: '请输入分析目标',
						trigger: 'blur'
					}],
				},
				form: {},
				total: 0,
				formlist: {
					index: 1,
					height: 10
				},
				fileName: '',
				error: '',
				tableData: [],
				text: '开始分析',
				message: '',
				timer: null
			}
		},
		mounted() {
			this.history()
		},
		beforeDestroy() {
			this.timer && clearInterval(this.timer)
		},
		methods: {
			inputValue() {
				this.formInline.value = this.formInline.value.trim()
			},
			getZHName(p) {
				let tmp = '-'
				this.resultList.forEach((item) => {
					if (item.value == p) {
						tmp = item.label
					}
				})
				return tmp
			},
			getZH(p) {
				let tmp = '-'
				if (p === 'file') {
					tmp = '复合查询'
				} else {
					this.options.forEach((item) => {
						if (item.value == p) {
							tmp = item.label
						}
					})
				}

				return tmp
			},
			async history() {
				let parmas = this.formlist
				let api3 = await this.$api.getClueHistoryPage(parmas)
				this.total = api3.data.amount
				this.tableData = []

				for (let i = 0; i < api3.data.data.length; i++) {
					let obj = {
						id: api3.data.data[i][0],
						type: this.getZH(api3.data.data[i][1]),
						target: api3.data.data[i][2],
						date: api3.data.data[i][3],
						status: api3.data.data[i][4],
						result: this.getZHName(api3.data.data[i][5]),
					}
					// console.log(obj)
					this.tableData.push(obj)
				}
				// console.log(this.tableData)
			},
			details(index, row) {
				// this.$router.push({
				// 	path: `clueSearchDetails`,
				// 	query: {
				// 		id: row.id,
				// 	},
				// })
				const {
					href
				} = this.$router.resolve({
					path: `clueSearchDetails`,
					query: {
						id: row.id,
					},
				});
				window.open(href, '_blank');
				// window.open('http://139.196.137.184:5004/view/' + row.id,'_blank')
				// window.open('http://127.0.0.1:5000/3/view/' + row.id,'_blank')
				// window.open(this.csUrl + "/3/view/" + row.id, "_blank");
			},

			goSearch() {
				this.$refs['formall'].validate((valid) => {
					if (valid) {
						this.onSearch()
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

			async onSearch() {
				// this.formInline.value.push(this.value)

				let parmas = this.formInline

				this.onceLoading = true
				let data = await this.$api.postSearch(parmas)
				if (data.data.code === 200) {
					this.$message({
						message: data.data.msg,
						type: 'success',
					})
					this.Refresh()
					// let data2 = await this.$api.postSearchNext()
					// console.log(data2)
					// this.message = data2
					// this.$router.push({
					// 	path: `/searchDetails`,
					// 	query: {
					// 		clueSearchMsg: this.message,
					// 		type: this.options,
					// 		value: this.input,
					// 	},
					// })
				}
				this.onceLoading = false

				// console.log(data)
			},
			Refresh(){
				this.formlist.index = 1
				this.history()
				this.timer && clearInterval(this.timer)
				this.timer = setInterval(() => {
					this.history()
				}, 3000)
				setTimeout(()=>{
					this.timer && clearInterval(this.timer)
				}, 1000 * 30)
			},
			uploadFile() {
				var f = document.getElementById('files')
				f.click()
			},
			changeFile() {
				var f = document.getElementById('files')
				let arr = f.files[0].name.split('.')
				if (arr[1] != 'txt') {
					this.error = '只能上传txt格式文件'
					this.$message.error(this.error)
				} else {
					this.error = ''
					this.fileName = f.files[0].name
					console.log(this.fileName)
				}
			},
			async submitUpload() {
				this.text = '正在上传'
				this.loading = true
				let file = document.getElementById('files').files[0]
				if (file) {
					let formData = new FormData()
					formData.append('filename', file)
					// formData.append('fileName', this.fileName)
					let {
						data: res
					} = await this.$api.postSearchNext(formData)
					this.text = '开始分析'
					this.loading = false
					if (res.code === 200) {
						this.$message.success('上传成功')
						this.Refresh()
					} else {
						this.$message.error('上传失败')
					}
				} else {
					this.text = '开始分析'
					this.loading = false
					this.$message.error('请选择文件')
				}
			},
		},
	}
</script>
<style scoped>
	.div_pagination {
		display: flex;
		flex-direction: row-reverse;
		margin: 10px 0;
		font-size: 14px
	}

	.clueSearchContainer {
		width: 98%;
		height: 87%;
		margin: 20px auto;
	}

	.forms {
		padding-left: 20px;
	}

	.bottom {
		width: 100%;
		height: 82.2%;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
	}

	.tables {
		width: 100%;
		height: 92%;
	}

	p {
		margin-left: 20px;
		font-size: 16px;
		font-weight: 600;
	}

	.bottom p {
		margin-top: 20px;
	}

	.tables>.el-table {
		margin-left: 20px;
	}

	.el-pagination {
		text-align: center;
		margin-top: 20px;
	}
</style>

<style>
	.clueSearchContainer .el-input--suffix .el-input__inner {
		padding-right: 30px;
		width: 300px;
	}

	.clueSearchContainer .el-input__inner {
		width: 300px;
	}

	.upload-demo {
		display: inline-block;
		margin-right: 40px;
	}

	#files {
		display: none;
	}
</style>
